
// //这是定义一个header模块 现在编程都是模块化  还有面向对象编程 把header 定义成一个模块 在其他页面引用
// //require（）方法就可以 引用 但是引用时路径太长 所以用一个 config.js配置文件 类似于一个对象 键值对的形式
// //把一个 模块 和一个 所在路径一一对应 其实就是 路径名的简化，最后 引用这个配置好的文件名 就可以
// //使用模块了
// //header模块 依赖 jQuery 其中逻辑是用jQuery的方法
define(['jquery'],()=>{
        class Header{
            constructor(){
            this.loadHeader().then(()=>{
                this.serach()
                this.calcTotalNum()
                this.showLoginPage()
            })
            }
            //这里是header模块的方法
            //首先是加载头部 是异步的 所以用到Promise
            loadHeader () {
                 return new Promise(resolve=>{
                    $('header').load('/html/modules/header.html',()=>{
                        resolve()
                    })
                  
                 })
               }
            //使用jsonp百度搜索接口完成搜索功能
            serach(){
               $('#searching').on('keyup',function(){
                   $('#searchFrame').html('')
                   let wd = $(this).val()
                   $.getJSON('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=?',{ wd },resp=>{
                    //    console.log(resp.s)
                       //把s当做一个数组遍历，其中的每一条作为一个li插入ul
                       resp.s.forEach(list => {
                           const li = $('<li></li>')
                           li.html(list)
                           $('#searchFrame').append(li)
                           //鼠标点击一个li把这个li的值 给搜索框
                       })                    
                   })
               })
               //鼠标点击一个li把这个li的值 给搜索框
               $('#searchFrame').on('mousedown','li',function(){
                //    console.log(this)
                //    console.log($(this))
                   $('#searching').val($(this).html())
                // console.log($(this).html())
                $('#searchFrame').html('')
               })
               //离开搜索框 把显示出来的东西删除
               $('#searching').blur(function(){
                // $("#searching").css("background-color","#D6D6FF");
                $('#searchFrame').html('')
               })
            }
            //计算总的商品数量
            calcTotalNum() {
                let totalNum = 0
            //先取数据 再计算总的数量
            let cart = localStorage.getItem('cart')
            if(cart) {
                //有数据 转化成数组，用reduce()方法实现累加就可以了
                cart = JSON.parse(cart)
                totalNum = cart.reduce((count,shop) => {
                return   count+=shop.count
                },0)
            }
            $('#totalNum,#totalNum2,#totalNumber').html(totalNum)
            }

            //弹出登录界面,实现相关逻辑功能--输入完后，点击登录按钮，获取输入框的值，用这个值在localStorge里寻找
            //是否存在当前数据，存在 登录成功 同时修改头部部分样式，不存在：提示输入有误。
            showLoginPage(){
                //显示登录框 修改了function 成箭头函数
            $('.login').on('click',()=>{
                $('.login-page').show()
                $('#login-button').on('click',()=>{
                    //console.log(233)事件绑定成功
                    //获取输入的值
                    const lusername = $('#lusername').val(),
                          lpassword = $('#lpassword').val()
                          //console.log(lusername,lpassword)成功获取输入值
                          //拿这个数据跟已存在的localStorage对比。先把之前的取出来
                          let userinfo = localStorage.getItem('userinfo')
                          //成功获取
                          // console.log(userinfo) 
                          //localStorage不是空的
                          if(userinfo){
                             //取出来放进数组
                             userinfo = JSON.parse(userinfo)
                             console.log(userinfo)
                             const isExist = userinfo.some((person)=>{
                                 return person.username===lusername&&person.password===lpassword
                             })
                             if(isExist){
                                //  alert('登录成功!')
                                 $('#unlogin').css('display','none')
                                 $('#islogin').css('display','block')
                                 $('#vipname').html(lusername)
                                // this.changeHead()
                                 //登录框消失
                                 $('.login-page').hide()
                             }else{
                                 alert('用户名或密码错误，请核对后重试!')
                             }
                          }
                          //localstorage是空的
                          else{
                               alert('用户名或密码错误，请核对后再试!')
                          }
                          //点击退出
                          $('#exit').on('click',function(){
                              $('#unlogin').show()
                              $('#islogin').hide()
                          })
                })
            })
               //隐藏登录框
            $('.close').on('click',function(){
                $('.login-page').hide()
            })
            }
            //切换header样式
            changeHead(){
                alert('登录成功!')
                $('#unlogin').css('display','none')
                $('#islogin').css('display','block')
                $('#vipname').html(lusername)
            }
          
        }
        return new Header()
})



